<template>
	<div class="container">
		<el-dialog
			:title="`${$t('dxn.card_ables_list.detail_rules')}`"
			:visible="visible"
			@close="handleClose"
			center
			custom-class="dialog"
		>
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				label-width="210px"
				label-suffix=":"
				class="demo-ruleForm"
			>
				<el-divider></el-divider>
				<el-form-item :label="`${$t('dxn.game_rule.game_name')}`">
					<el-input
						v-model.trim="ruleForm.gameName"
						v-symbols
						clearable
						:disabled="disabled"
						style="width:325px;"
					></el-input>
				</el-form-item>
				<!-- 超时(min)自动解散房间 -->
				<el-form-item :label="`${$t('dxn.game_rule.timeout')}`">
					<el-input
						v-model="ruleForm.gameOvertime"
						:disabled="disabled"
					></el-input>
				</el-form-item>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">1. 基础配置</span>
					<!-- 时长（h) -->
					<el-form-item :label="`${$t('dxn.game_rule.duration')}`">
						<el-tag>{{ ruleForm.gameTimes }}</el-tag>
					</el-form-item>
					<!-- 人数 -->
					<el-form-item :label="`${$t('dxn.game_rule.people')}`">
						<el-tag>{{ ruleForm.gamePeopleNumbers }}</el-tag>
					</el-form-item>
					<!-- 自动开始人数 -->
					<el-form-item
						:label="`${$t('dxn.game_rule.people_auto_start')}`"
					>
						<el-tag>{{ ruleForm.autoStartNumbers }}</el-tag>
					</el-form-item>
				</div>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">2. 盲注配置</span>
					<!-- 德州大盲BB 短牌Ante -->
					<el-form-item :label="bbSettingLabel">
						<el-tag>{{ ruleForm.bbSetting }}</el-tag>
					</el-form-item>
					<!-- 德州扑克-前注功能,前注(倍BB) -->
					<template v-if="isTexas">
						<el-form-item
							v-if="ruleForm.anteSwitch !== 2"
							:label="
								`${$t(
									'dxn.game_rule.ante_limits'
								)}（${unitLabel}）`
							"
						>
							<template v-if="ruleForm.anteSwitch === 1">
								<el-tag>
									{{ ruleForm.anteLimit }}
								</el-tag>
								<el-tag>
									{{ ruleForm.anteScoreCal }}
								</el-tag>
							</template>
							<template v-else>
								<el-switch
									v-model="ruleForm.anteSwitch"
									:disabled="disabled"
									:active-value="1"
									:inactive-value="0"
								></el-switch>
							</template>
						</el-form-item>
						<!-- gamePeopleNumbers小于4人时不展示 -->
						<el-form-item
							v-if="
								ruleForm.straddleSwitch &&
									ruleForm.gamePeopleNumbers >= 4
							"
							label="强制抓（Straddle）1人"
						>
							<el-switch
								v-model="ruleForm.straddleSwitch"
								:disabled="disabled"
								:active-value="2"
								:inactive-value="1"
							></el-switch>
						</el-form-item>
					</template>
					<!-- 德州默认带入值（倍BB）短牌默认带入值（倍Ante） -->
					<!-- <el-form-item
					:label="
						`${$t('dxn.game_rule.default_setting')}（${unitLabel}）`
					"
					prop="bbDefaultCarry"
				>
					<el-tag>{{ ruleForm.bbDefaultCarry }}</el-tag>
				</el-form-item> -->
				</div>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">3. 带入带出配置</span>
					<!-- 德州带入上下限（倍BB）短牌带入上下限（倍Ante）-->
					<el-form-item
						:label="
							`${$t(
								'dxn.game_rule.default_setting'
							)}（${unitLabel}）`
						"
					>
						<el-tag>{{ ruleForm.complementLowerLimit }}</el-tag>
						<span style="margin-left: 5px;margin-right: 5px;">
							≤X≤
						</span>
						<el-tag>{{ ruleForm.complementUpperLimit }}</el-tag>
					</el-form-item>
					<el-form-item
						v-if="ruleForm.forceComplementSwitch"
						label="强制补码"
					>
						<el-switch
							v-model="ruleForm.forceComplementSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
						<template v-if="ruleForm.forceComplementSwitch === 2">
							<el-tag>
								{{ ruleForm.forceComplementBb }}
							</el-tag>
							<el-tag type="info">
								盈利
							</el-tag>
						</template>
					</el-form-item>
					<!-- 允许主动带出 -->
					<template v-if="ruleForm.isActiveTakeout !== 2">
						<el-form-item
							:label="
								`${$t('dxn.game_rule.allow_active_bringout')}`
							"
						>
							<el-switch
								v-model="ruleForm.isActiveTakeout"
								:disabled="disabled"
								:active-value="1"
								:inactive-value="0"
							></el-switch>
						</el-form-item>
						<!-- 必要保留筹码(倍BB) -->
						<el-form-item
							:label="`${$t('dxn.game_rule.need_retain_chips')}`"
						>
							<el-tag>{{ ruleForm.needKeepChips }}</el-tag>
							<el-tag>{{ ruleForm.needKeepChipsCal }}</el-tag>
						</el-form-item>
					</template>
					<!-- 每手牌有效底池抽水比例(%) -->
					<!-- <el-form-item
					:label="`${$t('dxn.game_rule.pool_pump_ratio')}`"
					prop="rake"
				>
					<el-input
						v-model="ruleForm.rake"
						:disabled="disabled"
					></el-input>
				</el-form-item> -->
					<el-form-item
						v-if="ruleForm.forceOutSwitch"
						label="强制带出"
					>
						<el-switch
							v-model="ruleForm.forceOutSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
						<template v-if="ruleForm.forceOutSwitch === 2">
							<el-tag>
								{{ ruleForm.forceOutBb }}
							</el-tag>
							<el-tag type="info">
								盈利
							</el-tag>
						</template>
					</el-form-item>
				</div>
				<template v-if="ruleForm.squidGameSwitch">
					<el-divider></el-divider>
					<div class="show-panel">
						<span class="title">{{ startPanelNum }}. 额外玩法</span>
						<el-form-item label="鱿鱼游戏">
							{{ ruleForm.rewardModelName }}
						</el-form-item>
						<template v-if="ruleForm.squidGameSwitch === 2">
							<el-form-item :label="`奖励值（${unitLabel}）`">
								<el-tag>{{ ruleForm.rewardValue }}</el-tag>
								<el-tag>{{ ruleForm.rewardValueCal }}</el-tag>
							</el-form-item>
							<el-form-item label="最低人数">
								<el-tag>
									{{ ruleForm.minimumPeopleNumber }}
								</el-tag>
							</el-form-item>
							<el-form-item label="最大轮次">
								<el-tag>{{ ruleForm.maximumRound }}</el-tag>
							</el-form-item>
							<el-form-item label="触发方式">
								<el-tag>{{ ruleForm.triggerModeName }}</el-tag>
								触发
							</el-form-item>
							<el-form-item
								v-if="ruleForm.rewardModel === 1"
								label="鱿鱼上限"
							>
								<el-tag>{{ ruleForm.squidUpperLimit }}</el-tag>
							</el-form-item>
							<el-form-item
								v-if="ruleForm.noActionWinsNoSquidSwitch"
								label="无动作获胜无鱿鱼"
							>
								<el-switch
									v-model="ruleForm.noActionWinsNoSquidSwitch"
									:disabled="disabled"
									:active-value="2"
									:inactive-value="1"
								></el-switch>
							</el-form-item>
							<el-form-item
								v-if="ruleForm.mostSquidWinsSwitch"
								label="鱿鱼最多者独赢"
							>
								<el-switch
									v-model="ruleForm.mostSquidWinsSwitch"
									:disabled="disabled"
									:active-value="2"
									:inactive-value="1"
								></el-switch>
							</el-form-item>
							<el-form-item
								v-if="ruleForm.rewardModel === 1"
								label="独赢鱿鱼数下限"
							>
								<el-tag>
									{{ ruleForm.capotSquidNumberLowerLimit }}
								</el-tag>
							</el-form-item>
							<el-form-item
								v-if="ruleForm.multipleRewardSwitch"
								label="多重奖励"
							>
								<el-switch
									v-model="ruleForm.multipleRewardSwitch"
									:disabled="disabled"
									:active-value="2"
									:inactive-value="1"
								></el-switch>
							</el-form-item>
							<el-form-item
								v-if="ruleForm.firstSquidForceFlashSwitch"
								label="首次获得鱿鱼强制亮牌"
							>
								<el-switch
									v-model="
										ruleForm.firstSquidForceFlashSwitch
									"
									:disabled="disabled"
									:active-value="2"
									:inactive-value="1"
								></el-switch>
							</el-form-item>
						</template>
					</div>
				</template>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">{{ startPanelNum + 1 }}. 保险配置</span>
					<!-- 判断是否展示保险信息 -->
					<template v-if="ruleForm.insuranceIsShow">
						<!-- 保险模式 -->
						<el-form-item
							:label="`${$t('dxn.game_rule.insure_mode')}`"
						>
							<el-tag>
								{{ ruleForm.insuranceModeStr }}
							</el-tag>
						</el-form-item>
						<template v-if="!ruleForm.isEVInsurance">
							<!-- turn购买保险最低值 -->
							<el-form-item
								:label="
									$t('dxn.game_rule.turn_buy_insure_min_num')
								"
							>
								<el-tag>
									{{ ruleForm.insuranceTurn }}
								</el-tag>
							</el-form-item>
							<!-- 多池购保 -->
							<el-form-item
								v-if="ruleForm.multiPoolSwitch"
								:label="
									`${$t('dxn.game_rule.multi_pool_switch')}`
								"
							>
								<el-switch
									v-model="ruleForm.multiPoolSwitch"
									:disabled="disabled"
									:active-value="2"
									:inactive-value="1"
								></el-switch>
							</el-form-item>
							<!-- 单底池参与人数上限 -->
							<el-form-item label="单底池参与人数上限">
								<el-tag>
									{{ ruleForm.bottomPoolPeopleMaximum }}
								</el-tag>
							</el-form-item>
							<!-- 单底池领先人数上限 -->
							<el-form-item label="单底池领先人数上限">
								<el-tag>
									{{ ruleForm.singleBottomPoolLeaderLimit }}
								</el-tag>
							</el-form-item>
							<!-- River保险可买平分Outs -->
							<el-form-item
								v-if="ruleForm.riverInsuranceSplitOutsSwitch"
								label="River保险可买平分Outs"
							>
								<el-switch
									v-model="
										ruleForm.riverInsuranceSplitOutsSwitch
									"
									:disabled="disabled"
									:active-value="2"
									:inactive-value="1"
								></el-switch>
							</el-form-item>
						</template>
						<!-- EV提取下限 -->
						<el-form-item
							v-if="ruleForm.isEVInsurance"
							label="EV提取下限"
						>
							<el-tag>
								{{ ruleForm.evExtractionLowerLimit }}
							</el-tag>
							<el-tag>
								{{ ruleForm.evExtractionLowerLimitCal }}
							</el-tag>
						</el-form-item>
						<!-- 保险触发下限 -->
						<el-form-item
							:label="
								`${$t('dxn.game_rule.insure_trigger_lower')}`
							"
						>
							<el-tag>
								{{ ruleForm.insuranceLowerLimit }}
							</el-tag>
							<el-tag>
								{{ ruleForm.insuranceLowerLimitCal }}
							</el-tag>
						</el-form-item>
					</template>
				</div>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">{{ startPanelNum + 2 }}. 收费配置</span>
					<!-- 局服务费 -->
					<el-form-item
						v-if="ruleForm.tableFeeSwitch"
						label="局服务费"
					>
						<el-switch
							v-model="ruleForm.tableFeeSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
						<template v-if="ruleForm.tableFeeSwitch === 2">
							<el-tag>
								{{ ruleForm.tableFeeScale }}
							</el-tag>
							<el-tag type="info">
								盈利
							</el-tag>
						</template>
					</el-form-item>
					<!-- 每手服务费 -->
					<el-form-item
						:label="`${$t('dxn.game_rule.hand_service_charge')}`"
					>
						<el-tag>
							{{ ruleForm.serviceChargeTypeName }}
						</el-tag>
						<el-tag>
							{{ ruleForm.chargeScale }}
						</el-tag>
					</el-form-item>
					<!-- 低于三人五折 -->
					<el-form-item
						v-if="ruleForm.halfDiscountSwitch"
						label="低于三人五折"
					>
						<el-switch
							v-model="ruleForm.halfDiscountSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<el-form-item
						v-if="
							ruleForm.serviceChargeType !== 3 &&
								ruleForm.preflopEndFreeSwitch
						"
						label="PreFlop结束免费"
					>
						<el-switch
							v-model="ruleForm.preflopEndFreeSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<!-- 每手收费上限(倍BB) -->
					<el-form-item
						:label="`${$t('dxn.game_rule.hand_charge_limit')}`"
					>
						<el-tag>
							{{ ruleForm.handChargeUpperLimit }}
						</el-tag>
						<el-tag
							v-if="ruleForm.handChargeUpperLimit !== '无上限'"
						>
							{{ ruleForm.handChargeUpperLimitCal }}
						</el-tag>
					</el-form-item>
				</div>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">{{ startPanelNum + 3 }}. 防作弊</span>
					<!-- 抽签入座 -->
					<el-form-item
						v-if="ruleForm.drawLotsSeatingSwitch"
						label="抽签入座"
					>
						<el-switch
							v-model="ruleForm.drawLotsSeatingSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<!-- Preflop延迟看牌 -->
					<!-- gamePeopleNumbers小于3人时不展示 -->
					<el-form-item
						v-if="
							ruleForm.preflopDelay &&
								ruleForm.gamePeopleNumbers >= 3
						"
						label="Preflop延迟看牌"
					>
						<!-- 0-配置没开启  1-关 2-开 默认为0 -->
						<el-switch
							v-model="ruleForm.preflopDelay"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<!-- 实时视频 -->
					<el-form-item
						v-if="ruleForm.realTimeVideoSwitch"
						label="实时视频"
					>
						<el-switch
							v-model="ruleForm.realTimeVideoSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<el-form-item
						v-if="ruleForm.gpsImposeSwitch"
						label="GPS限制"
					>
						<el-switch
							v-model="ruleForm.gpsImposeSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<el-form-item v-if="ruleForm.ipImposeSwitch" label="IP限制">
						<el-switch
							v-model="ruleForm.ipImposeSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<el-form-item
						v-if="ruleForm.onlyIosDeviceSwitch"
						label="仅IOS设备"
					>
						<el-switch
							v-model="ruleForm.onlyIosDeviceSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
				</div>
				<el-divider></el-divider>
				<div class="show-panel">
					<span class="title">{{ startPanelNum + 4 }}. 其他配置</span>
					<!-- 语音聊天 -->
					<el-form-item
						v-if="ruleForm.voiceChatSwitch !== 2"
						:label="`${$t('dxn.game_rule.voice_chat_switch')}`"
					>
						<el-switch
							v-model="ruleForm.voiceChatSwitch"
							:disabled="disabled"
							:active-value="1"
							:inactive-value="0"
						></el-switch>
					</el-form-item>
					<!-- 实时语音 -->
					<el-form-item
						v-if="
							ruleForm.realTimeVoiceSwitch &&
								ruleForm.voiceChatSwitch === 1
						"
						label="实时语音"
					>
						<el-switch
							v-model="ruleForm.realTimeVoiceSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
					<!-- 隐藏小数 -->
					<!-- 盲注或前注包含小数的，不展示 -->
					<el-form-item
						v-if="
							ruleForm.isHiddenDecimal !== 2 &&
								ruleForm.isShowHiddenDecimal
						"
						:label="`${$t('dxn.game_rule.hide_decimals')}`"
					>
						<!-- 隐藏小数 0-关闭 1-开启 默认关闭 -->
						<el-switch
							v-model="ruleForm.isHiddenDecimal"
							:disabled="disabled"
							:active-value="1"
							:inactive-value="0"
						></el-switch>
					</el-form-item>
					<!-- 仅限直属会员可见 -->
					<el-form-item
						v-if="ruleForm.onlyDirectMemberSwitch === 1"
						:label="
							`${$t('dxn.game_rule.only_direct_member_switch')}`
						"
					>
						<el-switch
							v-model="ruleForm.onlyDirectMember"
							:disabled="disabled"
							:active-value="1"
							:inactive-value="0"
						></el-switch>
					</el-form-item>
					<!-- 入桌密码 -->
					<el-form-item
						v-if="ruleForm.tableEntryPasswordSwitch !== 2"
						:label="`${$t('dxn.game_rule.table_entry_password')}`"
					>
						<template
							v-if="ruleForm.tableEntryPasswordSwitch === 1"
						>
							{{
								ruleForm.status === 2
									? ruleForm.tableEntryPassword
									: '******'
							}}
						</template>
						<template v-else>
							<el-switch
								v-model="ruleForm.tableEntryPasswordSwitch"
								:disabled="disabled"
								:active-value="1"
								:inactive-value="0"
							></el-switch>
						</template>
					</el-form-item>
					<el-form-item label="单次行动延时次数">
						<el-tag>{{ ruleForm.singleActionDelaysNumber }}</el-tag>
					</el-form-item>
					<!-- ALLIN展示OUTS与胜率 -->
					<el-form-item
						v-if="ruleForm.showOutsWinn !== 2"
						:label="`${$t('dxn.game_rule.allin_outs_win_rate')}`"
					>
						<el-switch
							v-model="ruleForm.showOutsWinn"
							:disabled="disabled"
							:active-value="1"
							:inactive-value="0"
						></el-switch>
					</el-form-item>
					<el-form-item
						v-if="ruleForm.paySeePastHandSwitch"
						label="付费看以往手牌"
					>
						<el-switch
							v-model="ruleForm.paySeePastHandSwitch"
							:disabled="disabled"
							:active-value="2"
							:inactive-value="1"
						></el-switch>
					</el-form-item>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleClose">
					确 定
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default: () => {}
		},
		bbSettingLabel: {
			type: String,
			default: ''
		},
		unitLabel: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			disabled: true,
			ruleForm: {},
			startPanelNum: 4
		}
	},
	computed: {
		isTexas() {
			return [2001, 2003].includes(this.ruleForm.tableType)
		}
	},
	watch: {
		detail: {
			handler(val) {
				this.ruleForm = val || {}
				// 如果开启了额外玩法配置，下标从4开始，没有开启从3开始
				if (this.ruleForm.squidGameSwitch) {
					this.startPanelNum = 4
				} else {
					this.startPanelNum = 3
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	::v-deep .el-input {
		width: 180px;
	}
	::v-deep .el-form-item {
		margin-bottom: 10px;
	}

	.limit {
		display: flex;
		align-items: center;
		.upper-label {
			margin-left: -150px;
		}
	}

	::v-deep .dialog {
		min-width: 800px;
	}

	::v-deep .el-switch.is-disabled {
		opacity: 0.6;
	}
	.show-panel {
		.title {
			margin-top: -10px;
			display: block;
			width: 200px;
			line-height: 40px;
			font-weight: 700;
			text-align: right;
			color: #606266;
			font-size: 18px;
		}
	}
}
</style>
